<%--
  Created by IntelliJ IDEA.
  User: 黎日升
  Date: 2019/4/15
  Time: 20:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo - 登录</title>

    <!-- Site Properties -->
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/Semantic-UI/2.3.3/semantic.min.css}" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
    <link rel="stylesheet" th:href="@{/css/login.css}" href="../static/css/login.css">

</head>
<body>
<%@page import="first.LoginBean"%>
<jsp:useBean id="s1" class="first.LoginBean"/>
<%

    request.setCharacterEncoding("utf-8");
    String txtMsg = request.getParameter("username");
    String txtMsg1 = request.getParameter("password");
    session.setAttribute("usename",null);

    if((txtMsg!=null)&&(txtMsg1!=null)){
        boolean flag=s1.Judge(txtMsg,txtMsg1);

        if(flag){
            session.setAttribute("usename","sd");
            session.setAttribute("url","login.jsp");
            session.setAttribute("username",txtMsg);
            response.sendRedirect("individual.jsp");
        }
%>    <script type="text/javascript">alert("登陆不成功")</script><%
    }


    %>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <h2 class="ui image header">
            <img th:src="@{/images/spring.png}" src="../static/images/spring.png" class="image">
            <div class="content" style="color: #68bd45;">
                Spring Security
            </div>
        </h2>
        <div class="ui segment circle-0 mb-0">
            <div class="ui pointing secondary menu border-0 flex-around">
                <a class="item active" data-tab="account">账户登录</a>
                <a class="item" data-tab="msg">短信登录</a>
            </div>
            <div class="ui tab account active" data-tab="account">
                <form class="ui large form" action="login.jsp"   method="post" name="form1" >
                    <div class="ui stacked">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user circle outline icon"></i>
                                <input class="circle-0" type="text" name="username" placeholder="用户名" autofocus>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input class="circle-0" type="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="flex-between" style="margin-bottom: 1rem;">
                            <div class="ui checkbox">
                                <input type="checkbox" name="remember" tabindex="0" class="hidden">
                                <label>记住我</label>
                            </div>
                            <a href="javascript: void(0);" class="forget-pass">忘记密码</a>
                        </div>
                        <div class="ui fluid large teal submit button circle-0"><input type="submit" value="登陆" /></div>
                      <!-- <div class="ui fluid large teal submit button circle-0">登录</div>-->
                    </div>

                    <div class="ui error mini message"></div>

                </form>
            </div>
            <div class="ui tab mobile" data-tab="msg">
                <form class="ui large form" >
                    <div class="ui stacked">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="mobile alternate icon"></i>
                                <input id="log-tel" class="circle-0" type="text" name="tel" placeholder="手机号">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui action left icon input">
                                <i class="icon shield alternate"></i>
                                <input type="text" name="veriy" style="width: calc(100% - 140px);" class="circle-0" placeholder="短信验证码">
                                <button type="button" class="ui teal right icon button circle-0 mobileCodeBtn disabled" disabled>获取短信验证码</button>
                            </div>
                        </div>
                        <div class="ui fluid large teal submit button circle-0">登录</div>
                    </div>

                    <div class="ui error mini message"></div>

                </form>
            </div>
        </div>

        <div class="ui message mt-0 flex-between circle-0 other-way">
            <div style="display: flex;">
                <span class="muted">其他登录方式：</span>
                <a class="icon mr-1" th:href="@{/oauth2/authorization/qq}" href="oauth2/authorization/qq" title="QQ登录">
                    <img th:src="@{/images/QQ.png}" src="../static/images/QQ.png">
                </a>
                <a class="icon mr-1" th:href="@{/oauth2/authorization/weixin}" href="oauth2/authorization/weixin" title="微信登录">
                    <img th:src="@{/images/wechat.png}" src="../static/images/wechat.png">
                </a>
                <a class="icon mr-1" th:href="@{/oauth2/authorization/github}" href="oauth2/authorization/github" title="GitHub登录">
                    <img th:src="@{/images/github.png}" src="../static/images/github.png">
                </a>
                <!--<a class="icon mr-1" th:href="@{/oauth2/authorization/dgut}" href="oauth2/authorization/dgut" title="东莞理工学院登录">
                    <img th:src="@{/images/dgut.png}" src="../static/images/dgut.png">
                </a>-->
                <a class="icon mr-1" th:href="@{/login/dgut}" href="/login/dgut" title="东莞理工学院登录">
                    <img th:src="@{/images/dgut.png}" src="../static/images/dgut.png">
                </a>
            </div>
            <!--<a class="sign" href="javascript: void(0);">立即注册</a>-->
            <a class="sign" href="register.jsp">立即注册</a>
        </div>
    </div>
</div>

<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script th:src="@{/webjars/Semantic-UI/2.3.3/components/tab.min.js}" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/tab.min.js"></script>
<script th:src="@{/webjars/Semantic-UI/2.3.3/components/form.min.js}" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/form.min.js"></script>
<script th:src="@{/webjars/Semantic-UI/2.3.3/components/checkbox.min.js}" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/checkbox.min.js"></script>
<script th:src="@{/webjars/Semantic-UI/2.3.3/components/transition.min.js}" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/transition.min.js"></script>

<script type="text/javascript">


    $(function () {
        $('.account .ui.form').form({
            fields: {
                email: {
                    identifier: 'username',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入用户名'
                    }]
                },
                password: {
                    identifier: 'password',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入密码'
                    }]
                }
            }
        });
        $('.mobile .ui.form').form({
            fields: {
                email: {
                    identifier: 'tel',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入手机号'
                    },{
                        type: 'regExp',
                        value: /^1[3456789]\d{9}$/,
                        prompt: '请输入正确的手机号'
                    }]
                },
                password: {
                    identifier: 'veriy',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入短信验证码'
                    }
                    ]
                }


            }
        });

        $('.menu .item').tab();
        $('.ui.checkbox').checkbox();
    });

    function showMsg(msg){
        $('#error').text( msg ).show();
        if($.trim(msg) == '' || msg == null){
            $('#error').hide();
        }
    }

    function isMobile(mobile){
        var pattern = /^1[3456789]\d{9}$/;
        return pattern.test(mobile);
    }

    function getCodeBtnClick(){
        var $btn = $('.mobileCodeBtn');
        var timeCtrl = $btn[0]._timeCtrl;
        if(!timeCtrl){
            timeCtrl = {
                timer: null,
                second: 60,
                clickCnt: 0
            };
            $btn[0]._timeCtrl = timeCtrl;
        }
        if(timeCtrl.timer){
            return false;
        }
        if($(".mobileCodeBtn").attr("disabled") == "disabled"){
            return false;
        }

        $btn.addClass('disabled').html('已发送（<span id="seconds">60</span>秒）');
        $btn.attr('diasbled', 'diasbled');

        var second = 59;
        var countdown = setInterval(function(){
            if(second > 0){
                $('#seconds').text(second);
                second--;
            }else{
                $(".mobileCodeBtn").removeClass("disabled");
                $(".mobileCodeBtn").removeAttr("disabled");
                $btn.text('获取短信验证码');
                clearInterval(countdown);
            }
        }, 1000);
    }

    $("#log-tel").on('keyup', function(){
        if(isMobile($.trim($("#log-tel").val()))){
            $(".mobileCodeBtn").removeClass("disabled");
            $(".mobileCodeBtn").removeAttr("disabled");
        }else{
            $(".mobileCodeBtn").addClass("disabled");
            $(".mobileCodeBtn").attr("disabled", "disabled");
        }
    });

    $('.mobileCodeBtn').on('click', function(){
        if($(".mobileCodeBtn").attr("disabled") != "disabled" && isMobile()){
            getCodeBtnClick();
        }
    });
</script>

</body>
</html>
